<template>
	<view v-if=" progressType == 'circle' " class="progress" :style="{ '--primary-color': props.color }">
		<view class="progress-line"></view>
		<view class="progress-content">
			<slot></slot>
		</view>
		<view class="progress-playing"
			:style="{ 'background-image' : props.direction ? `conic-gradient(var(--primary-color) ${setDeg}deg, transparent ${setDeg}deg )`: `conic-gradient(transparent ${setDeg}deg, var(--primary-color) ${setDeg}deg )` }">
			<view
				style="position: absolute;width: 20rpx;height: 20rpx;border-radius: 50%;background-color: var(--primary-color);top: 0;left: 50%;transform: translateX(-50%);"
				v-if="setDeg != 0 && setDeg != 360"></view>
			<view
				style="position: absolute;width: 20rpx;height: 20rpx;background-color: var(--primary-color);left:238rpx;top: 41rpx;border-radius: 50%;"
				:style="{ top: `${Math.abs(setPosition.y)}rpx`, left: `${Math.abs(setPosition.x)}rpx`}"
				v-if="setDeg != 0 && setDeg != 360"></view>
		</view>
	</view>
	<view v-else class="line">
		<view class="line-l">0</view>
		<view class="line-progress">
			<view class="line-progress-active" :style="{ 'width': `${props.degree * 100}%`, 'background-color': props.color }">
				<view class="line-progress-indicate"></view>
			</view>
		</view>
		<view class="line-r">100</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineProps,
		watch
	} from 'vue'
	
	/**
	 * buttonTab 进度
	 * @description 
	 * @property {String} progressType 进度类型（line: 线, circle: 圆)
	 * @property {Number} degree 进度百分比 0 - 1
	 * @property {Boolean} direction 进度类型为圆的方向(true: 顺时针,false: 逆时针)
	 * @property {String} color 颜色
	 */
	const props = defineProps({
		progressType: {
			type: String,
			default: 'circle'
		},
		degree: {
			type: Number,
			default: 0,
		},
		direction: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: 'red'
		}
	})

	//计算点的x，y
	const circlePoint = (cx, cy, r, angle) => {
		var x = cx + r * Math.cos(angle);
		var y = cy + r * Math.sin(angle);
		return {
			x: x,
			y: y
		};
	}
	
	const setDeg = ref(props.degree * 360);
	const setPosition = ref({
		x: 0,
		y: 0
	});
	watch(() => props.degree, (newValue, old) => {
		setDeg.value = props.degree * 360;
		updateEffect();
	})
	onMounted(() => {
		updateEffect();
	})

	const updateEffect = () => {
		setDeg.value = props.direction ? setDeg.value : 360 - setDeg.value;
		let ceshi = circlePoint(140, 140, 140, ((-90 + setDeg.value) * Math.PI) / 180);
		setPosition.value = ceshi;
	}
</script>

<style lang="scss">
	.progress {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		position: relative;
		box-sizing: border-box;

		.progress-line {
			position: absolute;
			width: 280rpx;
			height: 280rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 1rpx solid #ccc;
			background-color: #fff;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 0;
		}

		.progress-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			width: 260rpx;
			height: 260rpx;
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.progress-playing {
			position: absolute;
			z-index: 1;
			width: 300rpx;
			height: 300rpx;
			top: 0;
			left: 0;
			border-radius: 50%;
		}
	}

	.line {
		display: flex;
		gap: 20rpx;
		align-items: center;

		.line-progress {
			height: 5rpx;
			width: 300rpx;
			background-color: #ccc;

			.line-progress-active {
				width: 50%;
				height: 100%;
				background-color: orange;
				position: relative;

				.line-progress-indicate {
					position: absolute;
					right: 0;
					top: 50%;
					width: 50rpx;
					height: 50rpx;
					box-sizing: border-box;
					transform: translate(50%, -50%);
					border-radius: 50%;
					background-color: #fff;
					box-shadow: 0 2rpx 10rpx 2rpx #ccc;
				}
			}
		}
	}
</style>